<template>
  <div v-show="!isFilterCallbackMode" class="op-group comp-op-common">
    <div class="op-title">常用</div>
    <div v-for="(item, i) in options" :key="i" class="option-item">
      <div class="title-row no-sub">
        <span
          class="view-icon"
          title="预览"
          @mouseleave="onMouseLeave()"
          @mouseenter="onMouseEnter($event, item.value)"
        >
          <img src="~@/assets/dataset/preview.png" alt="preview" />
        </span>
        <span class="label">{{ item.label }}</span>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doAction(item.value)"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class ColumnCommon extends Vue {
  /** 操作列表 */
  @Prop({
    type: Array,
    default() {
      return [
        {
          label: '删除所选列',
          value: OptionPreViewAction.columnCommonDeleteSelectColumns,
        },
        {
          label: '仅保留所选列',
          value: OptionPreViewAction.columnCommonDeleteOtherColumns,
        },
        {
          label: '去除所选列中的重复行',
          value: OptionPreViewAction.columnCommonDeleteRepeatCells,
        },
      ]
    },
  })
  options!: Array<object>

  /** 筛选模式是否有效 */
  get isFilterCallbackMode() {
    return DataStore.vrCurrenSetMode !== null
  }

  /** 预览鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 执行操作 */
  doAction(action: string) {
    switch (action) {
      case OptionPreViewAction.columnCommonDeleteSelectColumns:
        this.$emit('actiondone', {
          action,
          desc: '列操作，常规面板 > 删除所选列',
          data: {},
        })
        break
      case OptionPreViewAction.columnCommonDeleteOtherColumns:
        this.$emit('actiondone', {
          action,
          desc: '列操作，常规面板 > 仅保留所选列',
          data: {},
        })
        break
      case OptionPreViewAction.columnCommonDeleteRepeatCells:
        this.$emit('actiondone', {
          action,
          desc: '列操作，常规面板 > 去除所选列中的重复行',
          data: {},
        })
        break
      default:
        break
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
